<template>
  <view class="notice-detail">
    <!-- 加载状态 -->
    <view class="loading-container" v-if="loading">
      <uni-load-more status="loading" :contentText="{
        contentrefresh: '正在加载...'
      }"></uni-load-more>
    </view>

    <!-- 公告内容 -->
    <view class="notice-content" v-else-if="notice">
      <!-- 公告头部 -->
      <view class="notice-header">
        <view class="notice-title">{{ notice.title }}</view>
      </view>

      <!-- 公告元信息 -->
      <view class="notice-meta">
        <view class="meta-item">
          <text class="meta-label">发布时间：</text>
          <text class="meta-value">{{ formatDateTime(notice.createTime) }}</text>
        </view>

        <view class="meta-item">
          <text class="meta-label">查看次数：</text>
          <text class="meta-value">{{ notice.viewCount }}次</text>
        </view>
      </view>

      <!-- 公告正文 -->
      <view class="notice-body">
        <rich-text :nodes="notice.content"></rich-text>
      </view>
    </view>

    <!-- 错误状态 -->
    <view class="error-container" v-else>
      <view class="error-icon">📄</view>
      <view class="error-text">公告不存在或已删除</view>
      <button class="error-button" @click="goBack">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getNoticeById } from '@/api/notice.js';

const notice = ref(null);
const loading = ref(true);
const noticeId = ref(null);

// 获取页面参数
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  noticeId.value = currentPage.options.id;
  
  if (noticeId.value) {
    loadNoticeDetail();
  } else {
    loading.value = false;
  }
});

// 加载公告详情
const loadNoticeDetail = async () => {
  try {
    loading.value = true;
    const res = await getNoticeById(noticeId.value);
    notice.value = res.data;
  } catch (error) {
    console.error('加载公告详情失败:', error);
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};



// 格式化日期时间
const formatDateTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.notice-detail {
  min-height: 100vh;
  background-color: #fafafa;
}

.loading-container {
  padding: 100rpx 0;
  text-align: center;
}

.notice-content {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.notice-header {
  padding: 40rpx 30rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(to right, #ff9a9e, #ff6b6b, #fad0c4);
  }

  .notice-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
  }
}

.notice-meta {
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background-color: #fafafa;

  .meta-item {
    display: flex;
    margin-bottom: 16rpx;
    
    &:last-child {
      margin-bottom: 0;
    }

    .meta-label {
      font-size: 28rpx;
      color: #666;
      width: 160rpx;
      flex-shrink: 0;
    }

    .meta-value {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }
}

.notice-body {
  padding: 40rpx 30rpx;
  line-height: 1.6;
  
  :deep(rich-text) {
    font-size: 30rpx;
    color: #333;
    
    p {
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    img {
      max-width: 100%;
      height: auto;
      border-radius: 12rpx;
      margin: 20rpx 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      margin: 30rpx 0 20rpx;
      color: #333;
    }
    
    ul, ol {
      padding-left: 40rpx;
      margin: 20rpx 0;
    }
    
    li {
      margin-bottom: 10rpx;
    }
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 40rpx;
  text-align: center;

  .error-icon {
    font-size: 120rpx;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }

  .error-text {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 60rpx;
  }

  .error-button {
    background: linear-gradient(to right, #ff9a9e, #ff6b6b);
    color: #fff;
    border: none;
    border-radius: 40rpx;
    padding: 20rpx 60rpx;
    font-size: 30rpx;
    font-weight: 500;
  }
}
</style>